<!--  -->
<template>
  <div class="lower">
      <!-- <HeaderTop title="我的下级"></HeaderTop> -->
      <section class="container" ref='wrapper' :style="{ height: wrapperHeight + 'px' }">
        <mt-loadmore v-if="partner&&partner.length" :style="{ height: wrapperHeight + 'px' }" :top-method="loadTop" :bottom-method="loadBottom"  :bottom-all-loaded="allLoaded" :bottom-drop-text="bottomText"  ref="loadmore">
          <div :style="{height:'auto',minHeight: wrapperHeight + 'px',marginTop:'10px'}">
          <van-cell v-if="partner&&partner.length" :title="item.nickName" v-for="(item,index) in partner" :key="index" is-link to="/underlower" />
          <!-- <van-cell title="李四" is-link to="/underlower" />
          <van-cell title="王五" is-link to="/underlower" />
          <van-cell title="谢六" is-link to="/underlower" />
          <van-cell title="张三" is-link to="/underlower" />
          <van-cell title="李四" is-link to="/underlower" />
          <van-cell title="王五" is-link to="/underlower" />
          <van-cell title="谢六" is-link to="/underlower" /> -->
           <p v-if="allLoaded" class='allloaded'>已加载全部</p>
         </div>
        </mt-loadmore>
        
        <!-- <div class='allloaded nodata' v-else>暂无下级</div> -->
        <div v-else class='noGoods'> <img class='noGoodsImg' src="../../assets/img/noData.png" alt=""> </div>
        </section>
    </div>
</template>

<script>
// import HeaderTop from '../HeaderTop/HeaderTop'
import {mapState} from 'vuex'

export default {
  data () {
    return {
      userId:'',
      token:'',
      num:1,
      size:10,
      partner:[], 
      allLoaded:false,
      autofill:false,
      bottomText:"上拉加载更多",
      loadMoreConfig:{
          bottomDistance:100,
      },
      wrapperHeight:'100%'
    };
  },

  // components: {
  //     HeaderTop
  // },

  computed: {
    ...mapState(['userInfo'])
  },
  created(){
      this.userId = this.userInfo.userInfo.id
      this.token = this.userInfo.token
      this.getPartnerL()
  },
  mounted(){
        this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
  },
  methods: {
    async getPartnerL(){
      console.log('我的下级')
      const result = await this.API.reqPartnerL({userId:this.userId,token:this.token,num:this.num,size:this.size})
      this.partner = result.retData
    },
  //获取更多数据
    async getListDataPull(){
        console.log('num',this.num)
        let result = await this.API.reqPartnerL({userId:this.userId,token:this.token,num:this.num,size:this.size})
        console.log(result)
        if(result.retData==''||result.retData==[]||result.retData==null){
            this.isHaveMore(false) //禁止上拉
        }else{
            this.partner = this.partner.concat(result.retData?result.retData:[]);
            this.isHaveMore(true)
        }
    },
    //下拉刷新
    loadTop(){
      let self = this;
      this.num = 1;
      this.allLoaded = false;
      setTimeout(function(){
        self.getPartnerL();
        self.$refs.loadmore.onTopLoaded();
    },1000)
    },
    // 上拉加载
    loadBottom(){
        let self = this;
        self.num ++;
        console.log('loadmore',this.num)
        setTimeout(function(){
          if(this.partner){
            self.$refs.loadmore.onBottomLoaded();
          }
            self.getListDataPull();
        },1000)
    },
    isHaveMore(isHaveMore){
        this.allLoaded = true; //true是禁止上拉加载
        if(isHaveMore){
          this.allLoaded = false;
          
        }
    },
  }
}

</script>
<style lang='stylus' scoped>
@import "../../common/stylus/mixins.styl"
.lower
    // margin-top 45px
    padding-bottom 0 !important
    width 100%
    height 100%
    background #fff
    .container
      height 100%
      overflow-y scroll
      // top-border-1px(#e4e4e4)
.allloaded
  width 100%
  text-align center
.noGoods
  padding-top 30px
  text-align center
  .noGoodsImg
      width 150px
</style>